<template>
  <div id="app" :style="!isTabbarShow && !$route.path.includes('/login') && 'padding-top: 50px;'">
    <div class="header" v-show="!isTabbarShow && !$route.path.includes('/login')"><span @click="back" class="iconfont icon-fanhui" style="position: absolute;left: 8px;font-size: 16px;">返回</span><div style="text-align: center;font-weight: bold;" v-text="headerMsg"></div></div>
    <transition :name="transitionName">
      <keep-alive>
        <router-view style="width: 100%;"/>
      </keep-alive>
    </transition>
    <div class="foot" v-show="isTabbarShow">
      <router-link tag="div" to="/" class="foot-item foot-active">
        <span class="iconfont icon-shouye"></span>
        <div class="foot-text">首页</div>
      </router-link>
      <router-link tag="div" to="/servicesheet" class="foot-item">
        <span class="iconfont icon-fenlei"></span>
        <div class="foot-text">工单</div>
      </router-link>
      <router-link tag="div" to="/customer" class="foot-item">
        <span class="iconfont icon-xiaoxi"></span>
        <div class="foot-text">客服</div>
      </router-link>
      <router-link tag="div" to="/setting" class="foot-item">
        <span class="iconfont icon-shezhi"></span>
        <div class="foot-text">设置</div>
      </router-link>
    </div>
    <Loading v-show="isLoading"></Loading>
  </div>
</template>

<script>
import Loading from './components/Loading'
export default {
  name: 'app',
  data () {
    return {
      isTabbarShow: true,
      transitionName: 'left'
    }
  },
  methods: {
    back () {
      this.$router.back()
    }
  },
  computed: {
    isLoading () {
      return this.$store.state.isLoading
    },
    headerMsg () {
      return this.$route.name
    }
  },
  watch: {
    '$route.path': {
      handler: function (newVal, oldVal) {
        const list = ['/', '/servicesheet', '/customer', '/setting']
        if ((list.indexOf(newVal) > list.indexOf(oldVal)) && list.indexOf(oldVal) !== -1) {
          this.transitionName = 'left'
        } else if (newVal.includes(oldVal)) {
          this.transitionName = 'left'
        } else {
          this.transitionName = 'right'
        }
        this.isTabbarShow = list.includes(newVal)
      },
      immediate: true
    }
  },
  components: {
    Loading
  },
  mounted () {
    // 获取能耗的session,否则接口调不了
    fetch('/ystApp/index.html',
      { method: 'post',
        headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
        body: 'username=易司拓-易司拓&password=091d584fced301b442654dd8c23b3fc9',
        credentials: 'include' })
  }
}
</script>
<style lang="less">
@import '~vux/src/styles/reset.less';
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: #333;
}
.icon-fanhui{
  color: #0978f6;
}
  .router-link-exact-active{
    color: #e67a17;
  }
  .left-enter{
    opacity: 0;
    transform: translateX(100%);
    position: absolute;
    /*overflow: hidden;*/
  }
  .left-leave-to{
    opacity: 0;
    transform: translateX(-100%);
    position: absolute;
  }
  .right-enter{
    opacity: 0;
    transform: translateX(-100%);
  }
  .right-leave-to{
    opacity: 0;
    transform: translateX(100%);
    width: 90%;
    position: absolute;
  }
  .left-enter-active,
  .left-leave-active,
  .right-enter-active,
  .right-leave-active{
    transition: all .4s ease;
  }
  .header {
    font-size: 16px;
    line-height: 50px;
    position: fixed;
    z-index: 99;
    width: 100%;
    top: 0;
    background: #fff;
    border-bottom: 1px solid #eee;
    transition: all .4s ease;
}
</style>
